{extend name="public/layout" /}
{block name="content"}
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">重置密码</div>

                <div class="panel-body">
                    <form id='model-form' class="form-horizontal" method="POST" action="{:url('password/reset_save')}">
                        {:token()}
                        <div class="form-group">
                            <label for="mobile" class="col-md-4 control-label">手机号码</label>

                            <div class="col-md-6">
                                <div class="input-group">
                                    <input id="mobile" type="mobile" class="form-control" name="mobile" value="" required autocomplete="off">

                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn-primary" id="btn-send-code">
                                            发送验证码<span id="notice-seconds" class="hide">(<span id="left-seconds"></span>秒)</span>
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="sms-code" class="col-md-4 control-label">短信验证码</label>

                            <div class="col-md-6">
                                <input id="sms-code" type="text" class="form-control" name="sms_code" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="password" class="col-md-4 control-label">登录密码</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control" name="password" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="password-confirm" class="col-md-4 control-label">重复密码</label>

                            <div class="col-md-6">
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-8 col-md-offset-4">
                                <button type="submit" class="btn btn-primary">
                                    提交
                                </button>
                                <a class="btn btn-link" href="{:url('login/create')}">
                                    账号登录
                                </a>
                                <a class="btn btn-link" href="{:url('register/create')}">
                                    注册新账号
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="scripts"}
<script src="/static/plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="/static/plugins/jquery-validation/bootstrap.validate.js"></script>
<script type="text/javascript">
    var default_wait = 60;
    var wait = default_wait;
    function time(){
        var $sendBtn = $("#btn-send-code");
        var $spanNotice = $sendBtn.find("#notice-seconds");
        var $spanSecond = $sendBtn.find("#left-seconds");
        if(wait == 0) {
            $sendBtn.removeClass("btn-default").addClass("btn-primary").removeAttr("disabled", "disabled");;
            $spanNotice.addClass("hide");
            wait = default_wait;
        }else{
            if($spanNotice.hasClass("hide")){
                $sendBtn.removeClass("btn-primary").addClass("btn-default").attr("disabled", "disabled");
                $spanNotice.removeClass("hide");
            }
            $spanSecond.html(wait);
            wait--;
            setTimeout(function(){
                time()
            }, 1000);
        }
    }

    jQuery(function($){
        $("#btn-send-code").click(function(){
            var $btnCurrent = $(this);
            var inputMobile = $("input#mobile");
            if(!inputMobile.length || !inputMobile.val().length){
                alert("请输入您的手机号码");
                return false;
            }
            var mobile = parseInt(inputMobile.val())
            if(mobile < 13000000000 || mobile > 19900000000){
                alert("请输入您的手机号码");
                return false;
            }
            if($btnCurrent.hasClass("btn-primary")){
                $.ajax({
                    url: "{:url('verify_code')}",
                    type: "POST",
                    dataType: "JSON",
                    data: {"mobile": mobile},
                    success: function(res){
                        if(res["status"]){
                            wait = default_wait;
                            time();
                        }else{
                            alert(res["msg"]);
                        }
                    }, error: function () {
                        alert("数据执行错误！");
                    }
                });
            }
        });


        $("form#model-form").validate({
            rules:{
                "mobile":{
                    required: true,
                    min: 13000000000,
                    max: 19900000000,
                    remote: {
                        url: "{:url('password/check_present')}",
                        type: "post"
                    }
                }, "sms_code":{
                    required: true,
                    minlength: 6,
                    maxlength: 6,
                    remote: {
                        url: "{:url('password/valid_code')}",
                        type: "post",
                        data: {
                            mobile: function(){
                                return $("input#mobile").val();
                            }
                        }
                    }
                }, "password":{
                    required: true,
                    minlength: 6,
                    maxlength: 20
                }, "password_confirmation":{
                    required: true,
                    minlength: 6,
                    maxlength: 20,
                    equalTo: "#password"
                }
            },
            messages:{
                "mobile":{
                    required: "手机号码不能为空",
                    min: "手机号码格式不正确",
                    max: "手机号码格式不正确",
                    remote: "当前手机号码没有注册"
                }, "sms_code":{
                    required: "短信验证码不正确",
                    minlength: "短信验证码不正确",
                    maxlength: "短信验证码不正确",
                    remote: "短信验证码不正确"
                }, "password":{
                    required: "登录密码不能为空",
                    minlength: "登录密码长度必须在6-20之间",
                    maxlength: "登录密码长度必须在6-20之间"
                }, "password_confirmation":{
                    required: "重复密码不能为空",
                    minlength: "重复密码长度必须在6-20之间",
                    maxlength: "重复密码长度必须在6-20之间",
                    equalTo: "两次输入的密码不一致"
                }
            },
            highlight:function(element) {
                $(element).parents('.form-group').addClass('has-error');
            },
            unhighlight: function(element) {
                $(element).parents('.form-group').removeClass('has-error');
            },
            submitHandler: function(form){
                var $form = $(form);
                $.ajax({
                    url: $form.attr("action"),
                    type: $form.attr("method"),
                    dataType: "JSON",
                    data: $form.serialize(),
                    success: function(data){
                        if(data.code){
                            location.href = data["url"];
                        }else{
                            alert(data["msg"]);
                        }
                    }, error: function () {
                        alert("数据执行错误！");
                    }
                });
            }
        });
    });
</script>
{/block}